<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>微信商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--<link rel="stylesheet" href="css/sm.css">-->
		<!--<link rel="stylesheet" href="css/sm-extend.css">-->
		<link rel="stylesheet" href="css/ionicons.css">
		<link rel="stylesheet" href="css/tab-category.css">
		<link rel="stylesheet" href="css/style.css" />

		<style type="text/css">
			.active {
				color: #e2b02b;
				border-left: 2px solid #e2b02b;
				border-right: 0px!important;
				background: white!important;
				box-sizing: border-box;
			}
			
			.active1 {
				display: none;
			}
			
			.content-inner {
				/*height: 100%;*/
			}
			
			.ab {
				/*height: 100rem;*/
				/*overflow: scroll;*/
			}
			
			.col-list {
				height: 6.3rem;
				overflow: hidden;
				/*padding-bottom: 10px;*/
			}
			
			.col-list>span {
				width: 4rem;
				height: 4rem;
				/*padding-bottom: 10px;*/
			}
			.ispan{
				    width: 65.575%;
				    margin-left: 25%!important;
				    height: 28px!important;
			}
		</style>

	</head>

	<body>
		<div class="page-group">
			<div class="page-group">
			<div class="page page-current">
				<!-- 标题栏 -->
				<div class="header">
					<a><span style="font-size: 15px;color: #e2b02b;">商品分类</span></a>
					<form method="post" id="form" action="#" class="ispan"><input maxlength="8" type="text" placeholder="请输入关键词" /><img src="img/search.png"></form>
					<!--<p><span>厚和大厦</span><img src="img/back-bo.png" alt="" width="15%" /></p>-->
				</div>
				<!--这里是页面内容区域-->
				<div class="content category" style="height: 100%;position: fixed;width: 100%;">
					<!--分类导航-->
					<div class="category-nav" style="overflow: scroll;-webkit-overflow-scrolling: touch;">
						<ul class="ab">
						</ul>
					</div>
					<!--二丶三级分类-->
					<div class="category-body" style="overflow: scroll;-webkit-overflow-scrolling: touch;height: 90%;">
						
						<div class="category-thr row no-gutter zi">
							<!--<div class="category-thr-signal">
								<p><span class="category-thr-color"></span><span class="category-thr-name">瓜类</span></p>
								<div class="category-thr-con">
									<span>青瓜累</span>
									<span>青瓜累</span>
									<span>青瓜累</span>
									<span>青瓜累</span>
									<span>青瓜累</span>
									<span>青瓜累</span>
									<span>青瓜累</span>
									<span>青瓜累</span>
								</div>								
							</div>							-->
						</div>
						
						
						
						
						
						
                    </div>
				</div>
			</div>
		</div>
				<nav class="footer mui-bar-tab">
					<a class="tab-item external" href="tab-home.html">
						<img class="a1" src="img/home1.png" alt="" /><br />
						<span >首页</span>
					</a>
					<a class="tab-item external " href="tab-category.html">
						<img class="a2" src='img/fenlei.png' alt="" /><br />
						<span  style="color: #e9af29;">分类</span>
					</a>
					<span id="tanchu" class="tab-item external">
						<div><img src="img/tab.png" alt="" id="tab-add"/></div>
					</span>
					<a class="tab-item external" href="tab-cart.html" >
						<img class="a3" src="img/cart.png" alt="" /><br />
						<span>购物车</span>
					</a>
					<a class="tab-item external a4" href="tab-me.html" >
						<img class="a4" src="img/mine.png" alt="" /><br />
						<span>我的</span>
					</a>
		        </nav>

		</div>

		<script type="text/javascript" src="js/zepto.js" charset="UTF-8"></script>
		<!--<script type="text/javascript" src="js/sm.min.js" charset="UTF-8"></script>-->
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/jquery-3.1.1.min.js"></script>-->
		<script type="text/javascript" src="js/url.js"></script>
		<script type="text/javascript">
			form.onsubmit = function() {
				if($('.ispan>input').val() != '') {
					localStorage.searchwhere = $('.ispan>input').val();
					mui.openWindow({
						url: 'searchto.html',
						show: {
							aniShow: 'pop-in'
						}
					})
				} else if($('.ispan>input').val() == '') {
					mui.toast('请输入查询内容');
				}
				// your code        
				return false;
			};
//			mui.plusReady(function() {
//				document.addEventListener('category', function() {
//					$('.ab').html('');
//					$('.row').html('');
//					getlist();
////					console.log('刷新1111')
//				})
//			})
			/*点击搜索*/
			$('.ispan>img').on('tap', function(){
				//			alert($('.ispan>input').val());
				if($('.ispan>input').val() != '') {
					localStorage.searchwhere = $('.ispan>input').val();
					mui.openWindow({
						url: 'searchto.html',
						show: {
							aniShow: 'pop-in'
						}
					})
				} else if($('.ispan>input').val() == '') {
					mui.toast('请输入查询内容');
				}

			})

            var whereidlook = 1;
            var colorsArr = ['#ff0024', '#fc00ff', '#0600ff', '#009cff', '#00ffd2', '#00ff54', '#96ff00', '#f6ff00', '#ff3600', '#00c6ff'];

//			getlist();
			
             getnewlist();
			function getnewlist(){
            	 
				$('.ab').html('');
//				$('.category-thr').html('');

				$.ajax({
					type: 'post',
					url: ur + '/mobile/product/getCategoryData',
					dataType: 'json',
					data: {},
					success: function(data) {
						//						console.log(data)
						var n = data.categoryvoList.length;
						//						console.log(JSON.stringify(data) + '>>>>>' + n);
						for(var i = 0; i < n; i++) {
							
							var li = $("<li class='abc' id=" + data.categoryvoList[i].id + '>' +
								data.categoryvoList[i].name + '</li>'
							);
							$('.ab').append(li);
							
							for(var p = 0; p < data.categoryvoList[i].childrens.length; p++){
								var classify = $('<div class="category-thr-signal signal'+i+'">'+
														'<p><span class="category-thr-color" style="background-color:'+colorsArr[Math.round(Math.random()*10)]+';"></span><span class="category-thr-name">'+data.categoryvoList[i].childrens[p].name+'</span></p>'+
														'<div class="category-thr-con category'+i+''+p+'">'+
															
														'</div>'+								
													'</div>');
								$('.category-thr').append(classify);	
								
								
//					            alert(data.categoryvoList[i].childrens[p].childrens.length);
						            for(var o = 0; o < data.categoryvoList[i].childrens[p].childrens.length; o++){
						            	
						            	var classifysignal = $('<span class="tapwhere" id="'+data.categoryvoList[i].childrens[p].childrens[o].id+'">'+data.categoryvoList[i].childrens[p].childrens[o].name+'</span>');
									$('.category'+i+''+p+'').append(classifysignal);
					            }
					                
							}
                        $('.signal0').css('display','block');
					}
                                   
					},
				});
			}
         

			$('.ab').on('click','.abc',function(){
         	   $(this).siblings().css({"background-color":"#f3f3f3","color":"black","border-left":"none","font-size":"15px"})
         	   $(this).css({"background-color":"white","color":"#e2b02b","border-left":"2px solid #e2b02b","font-size":"17px"})
         	   
//       	alert($(this).index());
               
               var indexc = $(this).index();
//             var classname = signal
               $('.category-thr-signal').css('display','none');
         	   $('.signal'+indexc+'').css('display','block');
        });

        


         $('.category-thr').on('click','.tapwhere',function(){
//       	  alert(11);
            localStorage.whereclassId = $(this).attr('id');
            localStorage.whereclasstext = $(this).text();
         	   detail($(this).attr('id'));
         });
          
          
          function detail(even) {
				
				mui.openWindow({
					url: 'categroygoods.html',
					id: 'categroygoods'
				})
				//					})
			}
			//open_search();         
			// 打开搜索页面
			function open_search() {
				var popupHTML = '<div class="popup">' +
					'<div class="page-group">' +
					'<div class="page page-current">' +
					'<header class="bar bar-nav m-bar clearfix">' +
					'<span class="ion-android-close close-popup"></span>' +
					'<div class="searchbar">' +
					'<a class="searchbar-cancel">取消</a>' +
					'<div class="search-input">' +
					'<label class="icon icon-search" for="search"></label>' +
					'<input class="touch-search" type="search" id="search" placeholder="输入关键字..."/>' +
					'</div>' +
					'</div>' +
					'</header>' +
					'<div class="content" style="background-color: #fff">' +
					'<div class="clearfix">' +
					'<div class="search-title">最近搜索</div>' +
					'<div class="search-tags">' +
					'<span><a>IPAD PRO</a></span>' +
					'</div>' +
					'</div>' +
					'<div class="clearfix">' +
					'<div class="search-title2">热门搜索</div>' +
					'<div class="search-tags">' +
					'<span><a>空调</a></span>' +
					'<span><a>零食</a></span>' +
					'<span><a>充电宝</a></span>' +
					'<span><a>吹风机</a></span>' +
					'<span><a>鼠标</a></span>' +
					'<span><a>好东西</a></span>' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>'
				$.popup(popupHTML)
				//$('.touch-search').focus()
			}
			/*$.init(); // 初始化组件*/
		</script>
	</body>

</html>